body{
    margin: 0;
    background-color: #111;
    overflow: hidden;
}
span{
    display: block;
    width: 50px;
    height: 50px;
    background-image: url(jinglingtu.jpg);
    /*border: 2px solid white;*/
    background-size: 700% 700%;
    border: 1px solid #ae0000;
    border-radius: 10px;
}
.main{
    width: 380px;
    height: 370px;
    margin: 150px auto;
}
.lie{
    width: 52px;
    height: 364px;
    float: left;
}
.lie:nth-child(1) span{
    border: 2px solid red;
}
.lie:nth-child(2) span{
    border: 2px solid #FF6600;
}
.lie:nth-child(3) span{
    border: 2px solid yellow;
}
.lie:nth-child(4) span{
    border: 2px solid green;
}
.lie:nth-child(5) span{
    border: 2px solid #00FFFF;
}
.lie:nth-child(6) span{
    border: 2px solid #0033FF;
}
.lie:nth-child(7) span{
    border: 2px solid #660099;
}

@keyframes tops{
    0%{
        transform: translateX(-600px) translateY(-600px) rotate(0);
    }
    100%{
        transform: translateX(0) translateY(0) rotate(1080deg);
    }
}
@keyframes rights{
    0%{
        transform: translateX(600px) translateY(-600px) rotate(0deg);
    }
    100%{
        transform: translateX(0) translateY(0) rotate(1080deg);
    }
}
@keyframes bottoms{
    0%{
        transform: translateX(600px) translateY(600px) rotate(0deg);
    }
    100%{
        transform: translateX(0) translateY(0) rotate(1080deg);
    }
}
@keyframes lefts{
    0%{
        transform: translateX(-600px) translateY(600px) rotate(0deg);
    }
    100%{
        transform: translateX(0) translateY(0) rotate(1080deg);
    }
}

/*<!--l1t1 ~ l7t1-->*/
.l1t1{
    background-position: 0 0;
    animation-name: tops;
    animation-duration: 1s;
    animation-timing-function: linear;
}
.l2t1{
    background-position: 0 -50px;
    animation-name: rights;
    animation-duration: 2s;
    animation-timing-function: linear;
}
.l3t1{
    background-position: 0 -100px;
    animation-name: bottoms;
    animation-duration: 3s;
    animation-timing-function: linear;
}
.l4t1{
    background-position: 0 -150px;
     animation-name: lefts;
    animation-duration: 4s;
    animation-timing-function: linear;
}
.l5t1{
    background-position: 0 -200px;
     animation-name: tops;
    animation-duration: 5s;
    animation-timing-function: linear;
}
.l6t1{
    background-position: 0 -250px;
     animation-name: rights;
    animation-duration: 4s;
    animation-timing-function: linear;
}
.l7t1{
    background-position: 0 -300px;
     animation-name: bottoms;
    animation-duration: 3s;
    animation-timing-function: linear;
}

/*<!--l1t2~l7t2-->*/

.l1t2{
    background-position: -50px 0;
     animation-name: lefts;
    animation-duration: 2s;
    animation-timing-function: linear;
}
.l2t2{
    background-position: -50px -50px;
     animation-name: tops;
    animation-duration: 1s;
    animation-timing-function: linear;
}
.l3t2{
    background-position: -50px -100px;
     animation-name: rights;
    animation-duration: 2s;
    animation-timing-function: linear;
}
.l4t2{
    background-position: -50px -150px;
     animation-name: bottoms;
    animation-duration: 3s;
    animation-timing-function: linear;
}
.l5t2{
    background-position: -50px -200px;
     animation-name: lefts;
    animation-duration: 4s;
    animation-timing-function: linear;
}
.l6t2{
    background-position: -50px -250px;
     animation-name: tops;
    animation-duration: 5s;
    animation-timing-function: linear;
}
.l7t2{
    background-position: -50px -300px;
     animation-name: rights;
    animation-duration: 6s;
    animation-timing-function: linear;
}

/*<!--l1t3~l7t3-->*/

.l1t3{
    background-position: -100px 0;
     animation-name: bottoms;
    animation-duration: 7s;
    animation-timing-function: linear;
}
.l2t3{
    background-position: -100px -50px;
     animation-name: lefts;
    animation-duration: 6s;
    animation-timing-function: linear;
}
.l3t3{
    background-position: -100px -100px;
     animation-name: tops;
    animation-duration: 5s;
    animation-timing-function: linear;
}
.l4t3{
    background-position: -100px -150px;
     animation-name: rights;
    animation-duration: 4s;
    animation-timing-function: linear;
}
.l5t3{
    background-position: -100px -200px;
     animation-name: bottoms;
    animation-duration: 3s;
    animation-timing-function: linear;
}
.l6t3{
    background-position: -100px -250px;
     animation-name: lefts;
    animation-duration: 2s;
    animation-timing-function: linear;
}
.l7t3{
    background-position: -100px -300px;
     animation-name: rights;
    animation-duration: 1s;
    animation-timing-function: linear;
}

/*<!--l1t4~l7t4-->*/

.l1t4{
    background-position: -150px 0;
     animation-name: bottoms;
    animation-duration: 2s;
    animation-timing-function: linear;
}
.l2t4{
    background-position: -150px -50px;
     animation-name: lefts;
    animation-duration: 3s;
    animation-timing-function: linear;
}
.l3t4{
    background-position: -150px -100px;
     animation-name: tops;
    animation-duration: 4s;
    animation-timing-function: linear;
}
.l4t4{
    background-position: -150px -150px;
     animation-name: rights;
    animation-duration: 5s;
    animation-timing-function: linear;
}
.l5t4{
    background-position: -150px -200px;
     animation-name: bottoms;
    animation-duration: 6s;
    animation-timing-function: linear;
}
.l6t4{
    background-position: -150px -250px;
     animation-name: lefts;
    animation-duration: 7s;
    animation-timing-function: linear;
}
.l7t4{
    background-position: -150px -300px;
     animation-name: tops;
    animation-duration: 6s;
    animation-timing-function: linear;
}

/*<!--l1t5~l7t5-->*/

.l1t5{
    background-position: -200px 0;
     animation-name: rights;
    animation-duration: 5s;
    animation-timing-function: linear;
}
.l2t5{
    background-position: -200px -50px;
    animation-name: bottoms;
    animation-duration: 4s;
    animation-timing-function: linear;
}
.l3t5{
    background-position: -200px -100px;
    animation-name: lefts;
    animation-duration: 5s;
    animation-timing-function: linear;
}
.l4t5{
    background-position: -200px -150px;
    animation-name: tops;
    animation-duration: 6s;
    animation-timing-function: linear;
}
.l5t5{
    background-position: -200px -200px;
    animation-name: rights;
    animation-duration: 7s;
    animation-timing-function: linear;
}
.l6t5{
    background-position: -200px -250px;
    animation-name: bottoms;
    animation-duration: 6s;
    animation-timing-function: linear;
}
.l7t5{
    background-position: -200px -300px;
    animation-name: lefts;
    animation-duration: 5s;
    animation-timing-function: linear;
}

/*<!--l1t6~l7t6-->*/

.l1t6{
    background-position: -250px 0;
    animation-name: tops;
    animation-duration: 4s;
    animation-timing-function: linear;
}
.l2t6{
    background-position: -250px -50px;
    animation-name: rights;
    animation-duration: 3s;
    animation-timing-function: linear;
}
.l3t6{
    background-position: -250px -100px;
    animation-name: bottoms;
    animation-duration: 2s;
    animation-timing-function: linear;
}
.l4t6{
    background-position: -250px -150px;
    animation-name: lefts;
    animation-duration: 1s;
    animation-timing-function: linear;
}
.l5t6{
    background-position: -250px -200px;
     animation-name: tops;
    animation-duration: 2s;
    animation-timing-function: linear;
}
.l6t6{
    background-position: -250px -250px;
     animation-name: rights;
    animation-duration: 3s;
    animation-timing-function: linear;
}
.l7t6{
    background-position: -250px -300px;
     animation-name: bottoms;
    animation-duration: 4s;
    animation-timing-function: linear;
}

/*<!--l1t7~l7t7-->*/

.l1t7{
    background-position: -300px 0;
     animation-name: lefts;
    animation-duration: 5s;
    animation-timing-function: linear;
}
.l2t7{
    background-position: -300px -50px;
     animation-name: tops;
    animation-duration: 6s;
    animation-timing-function: linear;
}
.l3t7{
    background-position: -300px -100px;
     animation-name: rights;
    animation-duration: 7s;
    animation-timing-function: linear;
}
.l4t7{
    background-position: -300px -150px;
     animation-name: bottoms;
    animation-duration: 6s;
    animation-timing-function: linear;
}
.l5t7{
    background-position: -300px -200px;
     animation-name: lefts;
    animation-duration: 5s;
    animation-timing-function: linear;
}
.l6t7{
    background-position: -300px -250px;
     animation-name: tops;
    animation-duration: 4s;
    animation-timing-function: linear;
}
.l7t7{
    background-position: -300px -300px;
     animation-name: rights;
    animation-duration: 3s;
    animation-timing-function: linear;
}